<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>表单元素的处理:获取值以及设置默认值</p>
    <input type="text" v-model="val1">
    <p>{{val1}}</p>
    <textarea v-model="val2"></textarea>
    <p>{{val2}}</p>
    <hr>
    <label>性别：</label>
    <input type="radio" value="1" name="sex" v-model="val3">男
    <input type="radio" value="2" name="sex" v-model="val3">女
    <p>性别：{{val3}}</p>
    <!-- v-for版本的： -->
    <label>性别：</label>
    <span v-for="item in radioArr">
      <input 
        type="radio"
        :value="item.val"
        name="sex"
        v-model="val3"
      >{{item.text}}
    </span>
    <p>性别：{{val3}}</p>
    <hr>
    <label>爱好：</label>
    <input type="checkbox" name="hobby" v-model="val4" value="sing">唱
    <input type="checkbox" name="hobby" v-model="val4" value="dance">跳
    <input type="checkbox" name="hobby" v-model="val4" value="rap">rap
    <input type="checkbox" name="hobby" v-model="val4" value="basketball">打篮球
    <p>爱好：{{val4}}</p>
    <!-- v-for版本： -->
    <label>爱好：</label>
    <div v-for="hobby in checkboxArr">
      <input type="checkbox" name="hobby" v-model="val4" :value="hobby.val">{{hobby.text}}
    </div>
    <p>爱好：{{val4}}</p>
    <hr>
    <label>收货地址：</label>
    <select v-model="val5">
      <option value="beijing">京</option>
      <option value="tianjin">津</option>
      <option value="shanghai">沪</option>
      <option value="chongqing">渝</option>
    </select>
    <p>收货地址：{{val5}}</p>
    <!-- v-for -->
    <label>河南牌照</label>
    <select v-model="val6">
      <option v-for="item in selectArr" :value="item.val">豫{{item.text}}</option>
    </select>
    <p>你的牌照归属地是：{{val6}}</p>
    <!-- 下拉框多选 -->
    <label>直辖市：</label>
    <select v-model="val7" multiple>
      <option value="beijing">京</option>
      <option value="tianjin">津</option>
      <option value="shanghai">沪</option>
      <option value="chongqing">渝</option>
    </select>
    <p>直辖市：{{val7}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        val1: '',
        val2: '',
        val3: '2',
        radioArr: [
          {val: 1, text: '男'},
          {val: 2, text: '女'},
          {val: 3, text: '保密'},
        ],
        val4: ['rap'],
        checkboxArr: [
          {val: 'sing', text: '唱'},
          {val: 'dance', text: '跳'},
          {val: 'rap', text: 'rap'},
          {val: 'basketball', text: '打篮球'}
        ],
        val5: 'beijing',
        selectArr: [
          {val: 'zhengzhou', text: 'A'},
          {val: 'kaifeng', text: 'B'},
          {val: 'luoyang', text: 'C'},
          {val: 'pigndingshan', text: 'D'},
          {val: 'anyang', text: 'E'},
        ],
        val6: 'zhengzhou',
        val7: ['beijing','shanghai']
      }
    })
  </script>
</body>
</html>